<div class="flex flex-row gap-[16px]" style="margin: 24px">
  <div class="grow flex flex-col gap-[16px]">
    <div class="flex flex-row gap-[16px]">
      <mat-card style="width: calc(50% - 8px)">
        <mat-card-title>{{
          'dashboard_page.inc_data' | translate
        }}</mat-card-title>
        <mat-card-subtitle>{{
          'dashboard_page.trans_pro' | translate
        }}</mat-card-subtitle>
        <div class="flex flex-row justify-center items-center">
          <dashboard-donut-chart
            [data]="data.incomingTransfersChart"></dashboard-donut-chart>
        </div>
      </mat-card>

      <mat-card style="width: calc(50% - 8px)">
        <mat-card-title>{{
          'dashboard_page.out_data' | translate
        }}</mat-card-title>
        <mat-card-subtitle>{{
          'dashboard_page.trans_pro' | translate
        }}</mat-card-subtitle>
        <div class="flex flex-row justify-center items-center">
          <dashboard-donut-chart
            [data]="data.outgoingTransfersChart"></dashboard-donut-chart>
        </div>
      </mat-card>
    </div>

    <div class="flex flex-row flex-wrap gap-[16px]">
      <dashboard-kpi-card
        class="flex-even-sized"
        [label]="'dashboard_page.your_data_offers' | translate"
        [kpi]="data.numContractDefinitions"></dashboard-kpi-card>

      <dashboard-kpi-card
        class="flex-even-sized"
        [label]="'dashboard_page.your_assets' | translate"
        [kpi]="data.numAssets"></dashboard-kpi-card>

      <dashboard-kpi-card
        class="flex-even-sized"
        [label]="'dashboard_page.your_pol' | translate"
        [kpi]="data.numPolicies"></dashboard-kpi-card>

      <dashboard-kpi-card
        class="flex-even-sized"
        [label]="'dashboard_page.pre_cat' | translate"
        [kpi]="data.numCatalogs"></dashboard-kpi-card>

      <dashboard-kpi-card
        class="flex-even-sized"
        [label]="'dashboard_page.con_agree' | translate"
        [kpi]="data.numContractAgreements"></dashboard-kpi-card>
    </div>

    <mat-card>
      <mat-card-title>{{
        'dashboard_page.conn_prop' | translate
      }}</mat-card-title>
      <mat-card-subtitle>{{
        'dashboard_page.add_prop' | translate
      }}</mat-card-subtitle>
      <property-grid-group
        class="mt-[15px]"
        [propGroups]="data.connectorProperties">
      </property-grid-group>
    </mat-card>
  </div>

  <div class="shrink-0 flex flex-col gap-[16px]" style="width: 420px">
    <mat-card>
      <mat-card-title>{{
        'dashboard_page.edc_conn' | translate
      }}</mat-card-title>
      <mat-card-subtitle>
        {{ data.title }}
      </mat-card-subtitle>
      <p *ngIf="data.description" class="text-justify">
        {{ data.description }}
      </p>
      <p class="text-justify">
        {{ 'dashboard_page.descrip' | translate }}
      </p>
      <mat-form-field class="w-full" style="margin-bottom: -10px">
        <mat-label>{{ 'dashboard_page.conn_end' | translate }}</mat-label>
        <input
          #input
          matInput
          ngDefaultControl
          readonly
          [ngModel]="data.connectorEndpoint"
          (focus)="input.select()" />
        <mat-icon matPrefix>link</mat-icon>
        <button
          mat-icon-button
          matSuffix
          [matTooltip]="'general.copy_to_clipboard_tooltip' | translate"
          [cdkCopyToClipboard]="data.connectorEndpoint">
          <mat-icon>content_copy</mat-icon>
        </button>
      </mat-form-field>
      <mat-form-field class="w-full" style="margin-bottom: -10px">
        <mat-label>{{ 'dashboard_page.api_url' | translate }}</mat-label>
        <input
          #endpointInput
          matInput
          ngDefaultControl
          readonly
          [ngModel]="config.shownManagementApiUrl"
          (focus)="endpointInput.select()" />
        <mat-icon matPrefix>link</mat-icon>
        <button
          mat-icon-button
          matSuffix
          [matTooltip]="'general.copy_to_clipboard_tooltip' | translate"
          [cdkCopyToClipboard]="config.shownManagementApiUrl">
          <mat-icon>content_copy</mat-icon>
        </button>
      </mat-form-field>
    </mat-card>

    <mat-card
      *ngIf="
        ('mds-marketing' | isActiveFeature) && config.showEeBasicMarketing
      ">
      <mat-card-title
        ><span class="flex flex-row items-center"
          >{{ 'dashboard_page.provided' | translate }}
          <img
            class="h-6 ml-2 mt-1"
            src="/assets/images/sovity_logo.svg"
            alt="sovity logo" /></span
      ></mat-card-title>
      <mat-card-subtitle>{{
        'dashboard_page.edition_edc' | translate
      }}</mat-card-subtitle>

      <div class="flex flex-row h-fit">
        <div>
          <p class="text-justify mx-2">
            {{ 'dashboard_page.marketing_mds_basic_intro' | translate }}
          </p>
          <p class="text-justify mx-2">
            {{ 'dashboard_page.marketing_mds_basic_intro2' | translate }}
          </p>
        </div>
      </div>
      <div class="flex flex-row !space-x-[10px]">
        <a
          color="secondary"
          href="https://sovity.de/en/contact/"
          mat-stroked-button
          target="_blank">
          {{ 'dashboard_page.contact' | translate }}
        </a>
      </div>
    </mat-card>

    <mat-card *ngIf="'open-source-marketing' | isActiveFeature">
      <mat-card-title>{{
        'dashboard_page.managed_edc' | translate
      }}</mat-card-title>
      <mat-card-subtitle>{{
        'dashboard_page.conn_service' | translate
      }}</mat-card-subtitle>
      <div>
        <p class="text-justify">
          <translate-with-slot
            key="dashboard_page.marketing_ce_intro"
            [html]="true">
            <a class="link" href="https://sovity.de" target="_blank">sovity</a>
          </translate-with-slot>
          <br />
          <span
            [innerHTML]="
              'dashboard_page.marketing_ce_intro2' | translate
            "></span>
        </p>
        <div class="flex flex-row !space-x-[10px]">
          <a
            color="primary"
            href="mailto:contact@sovity.de"
            mat-flat-button
            target="_blank">
            {{ 'dashboard_page.contact' | translate }}
          </a>
          <a
            color="secondary"
            href="https://sovity.de"
            mat-stroked-button
            target="_blank">
            sovity
          </a>
        </div>
      </div>
    </mat-card>
    <mat-card>
      <mat-card-title>{{ 'dashboard_page.about' | translate }}</mat-card-title>
      <mat-card-subtitle>{{
        'dashboard_page.eclipse' | translate
      }}</mat-card-subtitle>
      <div>
        <p class="text-justify">
          {{ 'dashboard_page.marketing_about' | translate }}
        </p>
        <p class="text-justify">
          {{ 'dashboard_page.marketing_about2' | translate }}
        </p>
        <p class="text-justify">
          {{ 'dashboard_page.marketing_about3' | translate }}
        </p>
        <div class="flex flex-row !space-x-[10px]">
          <a
            color="secondary"
            href="https://github.com/eclipse-dataspaceconnector/DataSpaceConnector"
            mat-stroked-button
            externalLink>
            GitHub
          </a>
        </div>
      </div>
    </mat-card>
    <mat-card>
      <mat-card-title>{{
        'dashboard_page.about_ui' | translate
      }}</mat-card-title>
      <mat-card-subtitle>{{
        'dashboard_page.data_dashboard' | translate
      }}</mat-card-subtitle>
      <div>
        <p class="text-justify">
          {{ 'dashboard_page.marketing_about_ui' | translate }}
        </p>
        <ul class="list-style-material-icons-check">
          <li>
            <translate-with-slot
              key="dashboard_page.marketing_about_ui_catalog_view_offers">
              <a
                class="link"
                style="display: inline"
                [routerLink]="['/catalog-browser']">
                {{ 'catalog_browser_page.page' | translate }}
              </a>
            </translate-with-slot>
          </li>
          <li>
            <translate-with-slot
              key="dashboard_page.marketing_about_ui_catalog_negotiate">
              <a
                class="link"
                style="display: inline"
                [routerLink]="['/catalog-browser']">
                {{ 'catalog_browser_page.page' | translate }}
              </a>
            </translate-with-slot>
          </li>
          <li>
            <translate-with-slot
              key="dashboard_page.marketing_about_ui_contracts_view_existing">
              <a
                class="link"
                style="display: inline"
                [routerLink]="['/contracts']">
                {{ 'contract_agreement_page.page' | translate }}
              </a>
            </translate-with-slot>
          </li>
          <li>
            <translate-with-slot
              key="dashboard_page.marketing_about_ui_contracts_transfer">
              <a
                class="link"
                style="display: inline"
                [routerLink]="['/contracts']">
                {{ 'contract_agreement_page.page' | translate }}
              </a>
            </translate-with-slot>
          </li>
          <li>
            <translate-with-slot
              key="dashboard_page.marketing_about_ui_transfer_history_view">
              <a
                class="link"
                style="display: inline"
                [routerLink]="['/transfer-history']">
                {{ 'transfer_history_page.page' | translate }}
              </a>
            </translate-with-slot>
          </li>
          <li>
            <translate-with-slot
              key="dashboard_page.marketing_about_ui_assets_view_and_create">
              <a
                class="link"
                style="display: inline"
                [routerLink]="['/my-assets']">
                {{ 'asset_list_page.page' | translate }}
              </a>
            </translate-with-slot>
          </li>

          <li>
            <translate-with-slot
              key="dashboard_page.marketing_about_ui_policies_view_and_create">
              <a
                class="link"
                style="display: inline"
                [routerLink]="['/policies']">
                {{ 'policy_definition_page.page' | translate }}
              </a>
            </translate-with-slot>
          </li>
          <li>
            <translate-with-slot
              key="dashboard_page.marketing_about_ui_contract_definitions_view_and_create">
              <a
                class="link"
                style="display: inline"
                [routerLink]="['/data-offers']">
                {{ 'contract_definition_page.page' | translate }}
              </a>
            </translate-with-slot>
          </li>
        </ul>
      </div>
    </mat-card>
  </div>
</div>
